<template>
    <view class="tl-industry-select cu-modal bottom-modal" :class="{show:isShow}">
        <view class="cu-dialog">
            <view class="flex h100 flex-direction">
                <view class="azm-dialog-header">
                    <view class="azm-dialog-title">请选择所属行业</view>
                    <text class="tlIcon-cancel azm-dialog-close" @tap.stop="isShow=false"></text>
                </view>
                <view class="flex-sub" style="overflow: hidden">
                    <scroll-view scroll-y class="h100">
                        <view class="flex align-center justify-start flex-wrap azm-industry-select">
                            <view class="tl-industry-select-item" v-for="(item,index) in dataList" :key="item.id"
                                  @tap.stop="handleTap(item,index)">
                                <button class="cu-btn" :class="!item.active?'bg-gray':'active line-blue'">
                                    {{item.value}}
                                </button>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>

    const opts = {
        success () {
        },
        fail () {
        }
    }

    export default {
        name: "tl-industry-select",
        props: {
            isLoad: Boolean
        },
        filters: {
            ic_select_filter (input, arr, item) {
            }
        },
        data () {
            return {
                isShow: false,
                dataList: [],
                value: {}
            }
        },
        mounted () {
            this.isLoad && this.loadData();
        },
        methods: {
            async loadData () {
                const vm = this;
                let list = this.$Storage.getStorageSync("tradeList")
                if (!list) {
                    let result = await this.$ajax.Common.getTradeList({page_size: 999});
                    if (result.code === 0 && result.data) {
                        this.$Storage.setStorageSync("tradeList", result.data.list, "1d")
                        list = result.data.list
                    }
                }
                this.dataList = list.map(item => {
                    const active = !vm.$util.jude.isEmpty(vm.value.id) ? item.id === vm.value.id : false;
                    console.log(active);
                    return {
                        id: item.id,
                        active: active,
                        value: item.name
                    }
                });
                this.$emit("industryDataLoad", this.dataList);
                return Promise.resolve({status: list && list.length > -1, list});
            },
            show ({value} = {}) {
                const vm = this;
                return new Promise(async (resolve, reject) => {
                    if (typeof value !== "object") vm.value = {id: value};
                    else if (!vm.$util.jude.isEmptyObject(value)) vm.value = {...value};
                    else vm.value = {};
                    let result = await vm.loadData();
                    if (result.status === true) vm.isShow = true;
                    opts.success = resolve;
                    opts.fail = reject;
                })
            },
            handleTap (item, index) {
                typeof opts.success === "function" && opts.success({item, index});
                this.isShow = false;
            },
            handleClose () {
                typeof opts.fail === "function" && opts.fail();
                this.isShow = false;
            },
        }
    }
</script>

<style scoped lang="scss">
    .tl-industry-select {
        .azm-header-title {
            .text-xxl {
                font-size: 25*2upx;
            }
        }

        .cu-dialog {
            height: calc(100vh - 25%);
            padding: 0 0 14*2upx 0;
            background-color: #fff;
        }

        .azm-dialog-header {
            position: relative;
            height: 74*2upx;
            text-align: left;
            padding-top: 34*2upx;
            padding-left: 14*2upx;
            padding-right: 14*2upx;
        }

        .azm-dialog-close {
            position: absolute;
            top: 0;
            right: 14*2upx;
            font-size: 34*2upx;
            font-weight: bold;
            color: #CBD1D1;
        }

        .azm-dialog-title {
            font-size: 17*2upx;
            font-weight: 600;
            color: #1F2229;
            line-height: 24*2upx;
        }
    }

    .azm-industry-select {
        padding: 0 8*2upx;
    }

    .tl-industry-select-item {
        padding: 14*2upx 6*2upx 0 6*2upx;

        .cu-btn {
            height: 36*2upx;
            font-size: 13*2upx;
            border-radius: 2*2px;
        }

        .line-blue {
            background: rgba(0, 117, 255, 0.07);
            padding: 0 16*2upx;
        }
    }
</style>
